<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {  margin: 0px;  padding: 0px; list-style: none; }  /*全局模式*/
        #main {
            width: 100%;
            height: 600px;
            position: relative;
        }
        #pic {
            width: 100%;
            height: 600px;
            position: relative;
            overflow: hidden;      /*超出部分隐藏*/
        }
        #pic ul li {
            width: 100%;
            height: 600px;
            position: absolute;
            left:100%;
            top:0;
        }
        #pic ul li img {
            width: 100%;
            height: 600px;
        }
        .nav {
            width: 160px;
            height: 22px;
            position: absolute;
            left: 50%;
            bottom: 30px;
            margin-left: -80px;
        }
        .nav .pause {
            width: 22px;
            height: 22px;
            background: url("images/pause.png");
            position: absolute;
            left: 0;
            top:0;
            z-index: 1;   /* 设置图片优先级*/
        }
        .nav .play {
            width: 22px;
            height: 22px;
            background: url("images/play.png");
            position: absolute;
            left: 0;
            top:0;
            z-index: -1;  /* 设置图片优先级*/
        }
        .nav ul{
            width:128px;
            height:22px;
            float:right;/*右浮动*/
        }
        .nav ul li {
            width: 22px;
            height: 22px;
            background: url("images/bg_white.png");
            float: left;
            margin-right: 10px;
        }
        .nav ul li.bj {background: url("images/bg_blue.png");  }
    </style>
</head>
<body>
         <div id="main">
             <div id="pic">
             <ul>
                 <li><img src="images/1.jpg"></li>
                 <li  style="left: 0px;"><img src="images/2.jpg"></li>
                 <li><img src="images/3.jpg"></li>
                 <li><img src="images/4.jpg"></li>
             </ul>
             </div>
            <div class="nav">
                <span class="pause"></span>
                <span class="play"></span>
                <ul>
                    <li class="bj"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
         </div>
</body>
</html>